<template>
  <div class="register">
    <van-steps :active="active">
      <van-step>验证手机号</van-step>
      <van-step>接收验证码</van-step>
      <van-step>注册</van-step>
      <van-step>完成</van-step>
    </van-steps>
    <van-field
      v-model.trim="phone"
      required
      label="手机号"
      placeholder="请输入手机号"
      v-if="active != 3"
    />
    <van-cell-group inset v-if="active == 1">
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="getCode">发送验证码</van-button>
        </template>
      </van-field>
    </van-cell-group>

    <!-- 密码框 -->
    <van-field
      v-model="password"
      type="password"
      label="密码"
      v-if="active == 2"
    />
    <!-- 注册完成 -->
    <div class="finish" v-if="active == 3">
      <span> 恭喜你，完成注册！</span>
      <router-link to="/login">{{ time }}秒后去登录界面</router-link>
    </div>
<!-- 下一步 -->
    <van-button type="success" @click="next" v-if="active != 3"
      >{{text}}</van-button
    >
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { ref } from "vue";
import {occupiedPhone,getCodeData,checkCode,userRegister} from '../../api/register'
import {showNotify} from 'vant'

const active = ref(0);
const phone = ref("");
const sms = ref("");
const password = ref();
const time = ref(5);
const text=ref("下一步")

//5秒后跳转
const jumpToLogin = () => {
  time.value--
  if(time.value==0){
    router.push('/login')
  }
};

//验证手机号码是否被占用
const handleCheck=async()=>{
  if(!phone.value){

    active.value--;
    showNotify('请输入手机号')
    
  }
  try {
  const result= await occupiedPhone(phone.value)
  console.log(result)
    // 下一步
   
  } catch (error) {
    showNotify('手机号已被注册')
  }


}
//获取验证码
const getCode=async()=>{
  const resultCode=await getCodeData(phone.value)
  console.log('验证码结果',resultCode)
  sms.value=resultCode.data.data.code


}

//验证手机验证码
const handleCodeCheck=async()=>{
  if(!sms.value){

active.value--;
showNotify('请输入验证码')

}
const result=await checkCode(phone.value,sms.value)
console.log('验证验证码结果',result)
if(result.data.data.message=="验证码校验失败"){
  active.value--;
  showNotify('验证码错误')

}

}
//用户注册
const handleRegister=async(phone:any,password:any)=>{
  if(!password){
    active.value--;
    showNotify('密码不能为空')
    return

  }
  const result=await userRegister(phone,password)
  console.log('注册结果',result)
  if(result.data.data.status==500){
    showNotify(result.data.data.message)
    active.value--;
    console.log('active结果',active.value)


  }



}



const next = () => {
  active.value++;
  if(active.value==2){
    text.value='注册'
  }
  if (active.value > 3) {
    console.log("大了");
    return;
  }
  switch(active.value){
    case 1://验证手机号是否被注册
      handleCheck()
      break
    case 2://校验短信验证码
     handleCodeCheck()
      break
    case 3://注册
      handleRegister(phone.value,password.value)
      break


  }



  if (active.value == 3) {

setInterval(jumpToLogin, 1000);
}
};




</script>

<style lang="less" scoped></style>
